<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="../../common/amazeui-2.7.2/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../../common/amazeui-2.7.2/assets/css/app.css">
    <link rel="stylesheet" href="../../common/swiper-3.4.2/animate.min.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="../../common/jquery-3.1.1.min.js"></script>
    <script src="../../common/amazeui-2.7.2/assets/js/amazeui.min.js"></script>
    <title>节目投票</title>
    <style>
        html{
            height:100%;
        }
        body{
            /*background: linear-gradient(#D13C4B, #8C2437);*/
            background: linear-gradient(#d13d4b, #8b2537);
            height:100%;
            width:100%;
        }
        img{
            display:block;
        }
        .posa{
            position: absolute;
        }
        .txt{
            position: absolute;
        }
        #vote-card{
            animation-duration: 0.5s;
            animation-delay: 0.5s;
            animation-iteration-count: 1;
        }

    </style>
</head>
<body>
<!--树枝-->
<img src="img/vote/shuzhi_l.png" class="resize posa vote-delongl" style="width:170px;height:115px;top:20px;left:0;z-index:3;">
<img src="img/vote/shuzhi_r.png" class="resize posa vote-delongr" style="width:170px;height:115px;top:20px;right:0;z-index:3;">
<!--灯笼-->
<img src="img/vote/denglong_l.png" class="resize posa" style="width:148px;height:113px;top:88px;left:0;">
<img src="img/vote/denglong_r.png" class="resize posa" style="width:156px;height:80px;top:70px;left:155px;">
<!--烟花-->
<img src="img/vote/yanhua1.png" class="resize posa" style="width:20px;height:17px;top:45px;left:115px;">
<img src="img/vote/yanhua2.png" class="resize posa" style="width:26px;height:22px;top:34px;left:162px;">
<!--标题-->
<div class="resize posa" style="width:100px;height:28px;top:75px;left:132px;color:#FDD37F;font-size:100%;">
    <div class="txt" style="letter-spacing:2px;"><h3>节目单</h3></div>
</div>
<!--边框-->
<img src="img/vote/kuang.png" class="resize posa" style="width:258px;height:330px;top:110px;left:32px;">
<!--节目单-->
<div class="resize posa " id="param-box" style="width:212px;height:297px;top:126px;left:54px;overflow: scroll;">

    <div class="resize posa " style="width:210px;height:40px;top:0;left:0px;font-size: 100%;border-bottom:1px dashed #FDD37F;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;left:33px;font-size: 75%;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin: 0 0 20px 5px; height:20px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;font-size: 100%;">
            <div class="txt">
                <button type="button" class="vote-button"style="font-size:70%;width:50px;height:22px;color:#680513;border:1px solid #680513;border-radius:3px;cursor: pointer;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:55px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;">
        <img src="img/vote/dog_light.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#FDD37F;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;font-size: 100%;">
            <div class="txt">
                <button type="button" class="vote-button"style="font-size:70%;width:50px;height:22px;background-color:#FDD37F;color:#680513;border:1px solid #FDD37F;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

<!--    <div class="resize posa" style="width:210px;height:40px;top:110px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:165px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:220px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:275px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:330px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>

    <div class="resize posa" style="width:210px;height:40px;top:385px;left:0px;font-size: 100%;border-bottom: 1px dashed #FDD37F;background-color:yellow;">
        <img src="img/vote/dog_dark.png" class="resize posa" style="width:20px;height:22px;top:5px;left:3px;">
        <div class="txt" style="width:120px;font-size: 75%;left:33px;color:#680513;">
            <p style="margin-bottom: 0;margin-left:5px;">开场舞：韩国霹雳舞</p>
            <p style="margin-top: 0;margin-left:5px;">营销一部，网络部</p>
        </div>
        <div class=" posa resize" style="left:158px;top:6px;">
            <div class="txt">
                <button type="button" class="vote-button"style="width:50px;height:22px;color:#680513;border:1px solid #333;border-radius:3px;">投票</button>
            </div>
        </div>
    </div>-->

</div>
<!--底部建筑-->
<img src="img/vote/house.png" class="resize posa" style="width:320px;height:70px;bottom:0;">

<!--投票弹框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="vote-modal">
    <div class="am-modal-dialog resize" style="width:272px;height:140px;left:9px;background-color: #EAC388;">
        <img src="img/vote/modal_border.png" class="resize posa" style="width:262px;height:130px;top:5px;left:5px;cursor:pointer;">
        <!--小狗-->
        <div id="vote-dog">
            <img src="img/vote/modal_dog_dark.png" class="resize posa" style="width:44px;height:44px;top:25px;left:20px;cursor:pointer;">
            <img src="img/vote/modal_dog_dark.png" class="resize posa" style="width:44px;height:44px;top:25px;left:66px;cursor:pointer;">
            <img src="img/vote/modal_dog_dark.png" class="resize posa" style="width:44px;height:44px;top:25px;left:112px;cursor:pointer;">
            <img src="img/vote/modal_dog_dark.png" class="resize posa" style="width:44px;height:44px;top:25px;left:158px;cursor:pointer;">
            <img src="img/vote/modal_dog_dark.png" class="resize posa" style="width:44px;height:44px;top:25px;left:205px;cursor:pointer;">
        </div>

        <!--按钮-->
        <div class="posa resize" style="left:83px;top:75px;font-size: 100%;">
            <div class="txt">
                <button type="button" class="card-button resize"style="font-size:70%;width:102px;padding:4px 0;background-color:#B60129;color:#fff;border-radius:3px;">投票赢福卡</button>
            </div>
        </div>
        <div class="posa resize" style="left:60px;top:108px;font-size: 100%;color:#B60129;">
            <div class="txt">
                <p class="resize" style="width:150px;font-size: 70%;">（点亮一只贺年犬代表一分）</p>
            </div>
        </div>

    </div>
px
</div>

<!--福卡-->
<!--<div class="am-modal am-modal-alert" tabindex="-1" id="vote-card-modal">
    <div class="am-modal-dialog resize" style="width:240px;height:196px;top:11px;left:-1px;background-color: rgba(0,0,0,0)">
        <a href="javascript:void(0)"><img src="img/vote/card.png" class="resize posa" style="width:240px;height:190px;top:10px;"></a>
    </div>
</div>-->
<div class="am-modal am-modal-alert" tabindex="-1" id="vote-card-modal">
    <div class=" am-modal-dialog resize posa" id="vote-card"style="width:240px;height:196px;top:143px;left:41px;background-color: rgba(0,0,0,0)">
        <a href="card.html">
            <img src="img/vote/card.png" class="resize posa" style="width:240px;height:180px;top:10px;">
            <div class="posa resize" style="left:97px;top:10px;font-size: 100%;color:#CA0B0D;cursor: pointer;">
                <div class="txt"><h1 class="resize posa"  id="card-text" style="font-size:290%;font-family:南宋书局体;top:-5px;left:0;">尊</h1></div>
            </div>
        </a>
    </div>
</div>


<script>
    var votePoint=0;


    /*创建节目单*/
  /*     var div=$('<div class="resize posa"></div>')
               .css({'width':'210px','height':'40px','top':'0px','left':'0px','font-size': '100%','border-bottom':'1px dashed #FDD37F','background-color':'yellow'})
               .appendTo($('#param-box'));*/





    /*弹出投票框*/
    $('.vote-button').click(function(){
        $('#vote-modal').modal();
    });

    /*点击小狗*/
    $('#vote-dog img').click(function(){
        votePoint= $(this).index()+1;
        $(this).attr('src','img/vote/modal_dog_light.png');
        $(this).prevAll().attr('src','img/vote/modal_dog_light.png');
        $(this).nextAll().attr('src','img/vote/modal_dog_dark.png');
    });

    /*提交后弹出福卡*/
    $('.card-button').click(function(){
        if(votePoint){
            $('#vote-modal').modal('close');
            $('#vote-card-modal').modal();
            /*字*/
         /*   $('#card-text').html('鼎');*/
            $('#vote-card').addClass('animated fadeInDown');
            setTimeout(function(){
                $('#vote-card-modal').modal('close');
            },10000);
        }

    });









    /*窗口改变时自适应*/
    scaleW=window.innerWidth/320;
    scaleH=window.innerHeight/480;
    var resizes = document.querySelectorAll('.resize');
    for (var i=0; i<resizes.length; i++) {
        resizes[i].style.width=parseInt(resizes[i].style.width)*scaleW+'px';
        resizes[i].style.height=parseInt(resizes[i].style.height)*scaleH+'px';
        resizes[i].style.top=parseInt(resizes[i].style.top)*scaleH+'px';
        resizes[i].style.left=parseInt(resizes[i].style.left)*scaleW+'px';
    }

    /*文字自适应*/
    var scales = document.querySelectorAll('.txt');
    for (var j=0; j<scales.length; j++) {
        ss=scales[j].style;
        ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[j].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[j].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
    }
</script>
</body>
</html>